<template>
  <div class="app-container">
    <div class="title">个人信息</div>
    <div class="info-box">
      <el-form ref="ruleForm" label-position="left" label-width="80px" :model="formLabelAlign" :rules="rules" >
        <el-form-item label="头像" prop="avatar">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :headers="{'authorization': 'Bearer ' + token}"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="formLabelAlign.avatar" :src="domain + formLabelAlign.avatar" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.username" disabled/>
        </el-form-item>
        <el-form-item label="姓名" prop="nickname">
          <el-input v-model="formLabelAlign.nickname" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="formLabelAlign.role.role_name" disabled/>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Userinfo',
  data() {
    return {
      formLabelAlign: {
        avatar: '',
        fileList: [],
        role: {
          role_name: null
        }
      },
      rules: {},
      domain: '',
      action: `${process.env.VUE_APP_BASE_API}/cms/admin/upload`
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const res = await this.$http.get('/cms/admin/getUserInfo')
      const { id, avatar, username, nickname, role, admin_status, domain } = res.data
      this.domain = domain
      this.formLabelAlign = { id, avatar, username, nickname, role, admin_status }
    },
    handleAvatarSuccess(res, file) {
      this.domain = res.data.domain
      this.formLabelAlign.avatar = res.data.image
    },
    beforeAvatarUpload(file) {
      console.log('before', file)
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(async valid => {
        if (valid) {
          const res = await this.$http.put(`/cms/admin/update/${this.formLabelAlign.username}`, { nickname: this.formLabelAlign.nickname })
          if (res.code === 0) {
            this.$message({
              message: res.message,
              type: 'success',
              duration: 2000
            })
            this.$router.push('/admin/index')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .app-container{
    .info-box{
      margin-top: 20px;
      width: 500px;

      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 78px;
        height: 78px;
        text-align: center;
        line-height: 78px;
      }
      .avatar{
        width: 78px;
      }
    }
  }
</style>
